<template>
	<view class="order_container">
		<view class="">
			<!-- 顶部tab -->
			<view class="order_top_tab_box">
				<view
					class="top_tab_box"
					v-for="(item, index) in topTabList"
					:key="index"
					:class="[isActive === index ? 'top_tab_active_box' : '']"
					@click="handlerTabs(item, index)"
				>
					<!-- {{ item.name }} | {{item.orderTotal ? item.orderTotal : 0 }} -->
					<span v-if="item.name == '分销订单'">{{ item.name }} | {{ orderTotalDistribution }}</span>

					<span v-else-if="item.name == '直营订单'">{{ item.name }} | {{ orderTotalDirectly }}</span>
				</view>
			</view>
			<view class="order_list_box">
				<view class="order_title_box">
					<tr v-for="(item, index) in orderTitleList" :key="index">
						<th>{{ item }}</th>
					</tr>
				</view>
				<view class="order_content_box" v-if="broadbandOrder.length !== 0">
					<view class="order_content" v-for="(items, indexs) in broadbandOrder" :key="indexs">
						<view class="order_all" @click="handlerMore(items, indexs)">
							<view style="width: 40rpx; word-break: break-all; margin-right: 20rpx">{{ indexs + 1 }}</view>
							<view style="width: 172rpx; word-break: break-all; margin-right: 20rpx">
								{{ items.created_at }}
							</view>
							<view style="width: 156rpx; word-break: break-all; margin-right: 8rpx">{{ items.contact ? items.contact : '暂无' }}</view>
							<view style="width: 180rpx; word-break: break-all">{{ items.mobile ? items.mobile : '暂无' }}</view>
							<view class="">
								<span v-if="items.open_status == 0">待受理</span>
								<span v-if="items.open_status == '1'">待受理</span>
								<span v-else-if="items.open_status == '2'">受理成功</span>
								<span v-else-if="items.open_status == '3'">受理失败</span>
							</view>
						</view>

						<view class="other_content_box" v-if="handlerFlag(items, indexs)">
							<view class="other_detail_top">
								<view class="detail_top_all">
									<view class="top_line"></view>
									<view class="top_title">订单详情</view>
								</view>
								<view class="detail_top_copy" @click="handleCopyOrder(items)">一键复制</view>
							</view>

							<view class="other_detail_con">
								<view class="other_order">订单编号：</view>
								<view class="other_con" style="font-family: my-font">
									{{ items.order_no }}
								</view>
							</view>

							<view class="other_detail_con">
								<view class="other_order">下单时间：</view>
								<view class="other_con">
									{{ items.created_at }}
								</view>
							</view>

							<view class="other_detail_con">
								<view class="other_order">订单状态：</view>
								<view class="other_con">
									<span v-if="items.open_status == 0">待受理</span>
									<span v-if="items.open_status == '1'">待受理</span>
									<span v-else-if="items.open_status == '2'">受理成功</span>
									<span v-else-if="items.open_status == '3'">受理失败</span>
								</view>
							</view>

							<view class="other_detail_con">
								<view class="other_order">套餐名称：</view>
								<view class="other_con">
									{{ items.package_name ? items.package_name : '暂无' }}
								</view>
							</view>

							<view class="other_detail_con" v-if="items.sett_status">
								<view class="other_order">结算状态：</view>
								<view class="other_con">
									<span v-if="items.sett_status == 0">未结算</span>
									<span v-else-if="items.sett_status == 1">结算成功</span>
									<span v-else-if="items.sett_status == 2">结算失败</span>
								</view>
							</view>

							<view class="other_detail_con" v-if="items.sett_time">
								<view class="other_order">结算时间：</view>
								<view class="other_con" style="font-family: my-font">
									{{ items.sett_time ? items.sett_time : '无' }}
								</view>
							</view>

							<view class="other_detail_con" v-if="items.sett_reason">
								<view class="other_order">结算原因：</view>
								<view class="other_con">
									{{ items.sett_reason ? items.sett_reason : '无' }}
								</view>
							</view>

							<view class="other_detail_con">
								<view class="other_order">开卡回文：</view>
								<view class="other_con">
									{{ items.open_message ? items.open_message : '无' }}
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 暂无订单 -->
				<view class="order_content_no" v-else-if="broadbandOrder.length == 0">———— 暂无订单 ————</view>
			</view>
		</view>

		<!-- 下单时间弹窗 -->
		<u-picker v-model="showScreenTime" mode="time" @confirm="surePickerTime"></u-picker>

		<!-- 开卡状态弹窗 -->
		<u-select v-model="showScreenOrderState" :list="screenOrderStateList" @confirm="selectOrderState"></u-select>

		<!-- 结算状态弹窗 -->
		<u-select v-model="showSettStatus" :list="settStatusList" @confirm="selectSettStatus" style="font-family: all-font"></u-select>

		<!-- 订单倒计时demo -->
		<!-- <uni-countdown class="room-count" color="#FF5733" :show-day="false" :second="timeupSecond"
			@timeup="timeup(item.createTime)" />
		<text class="room-count-txt">之后取消</text> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			// timeupSecond: null,
			// 顶部tabs
			topTabList: [
				{
					id: '0',
					name: '分销订单'
				},
				{
					id: '1',
					name: '直营订单'
				}
			],
			isActive: 0,
			// 顶部tabs
			topTabList: [
				{
					id: '0',
					name: '分销订单'
				},
				{
					id: '1',
					name: '直营订单'
				}
			],
			isActive: 0,
			isActiveTwo: '',
			middleTablist: [
				{
					name: '全部',
					id: ''
				},
				{
					name: '待发货',
					id: '0'
				},
				{
					name: '生产中',
					id: '1'
				},
				{
					name: '已发货',
					id: '2'
				},
				{
					name: '开卡失败',
					id: '3'
				},
				{
					name: '已结算',
					id: '4'
				}
			],
			middleTabCurrent: 0,
			screenTime: '', // 下单时间
			screenCommodity: '', // 商品名称
			showScreenCommodity: false, // 商品名称弹窗
			// 开卡状态弹窗数据
			screenOrderStateList: [
				{
					label: '待发货',
					value: '10'
				},
				{
					label: '生产中',
					value: '12'
				},
				{
					label: '已发货',
					value: '14'
				},
				{
					label: '开卡失败',
					value: '17'
				}
			],
			// 结算状态数据
			settStatusList: [
				{
					label: '未结算',
					value: '0'
				},
				{
					label: '结算成功',
					value: '1'
				},
				{
					label: '结算失败',
					value: '2'
				}
			],
			showScreenOrderState: false,
			scrollTop: 0,
			orderTitleList: ['序', '下单时间', '姓名', '联系电话', '订单状态'],
			orderContentList: [],
			orderContentListDirectly: [],

			// 套餐下拉表头
			packageOtherTitle: ['序', '订单号', '套餐名称', '物流名称', '物流单号'],

			showScreenTime: false,
			packageId: '',
			screenPhone: '',
			settStatus: '',
			settStatusCode: '',
			screenIdCard: '',
			screenOrder: '',
			screenOrderState: '',
			// 是否显示下面四个选项
			isShowOtherSelect: false,
			orderStatus: '',
			showIndex: -1,
			pageObj: {
				pageNow: 1,
				pageSize: 20
			},
			total: 0,
			orderTotalDistribution: 0, // 分销订单数量
			orderTotalDirectly: 0, // 直营订单那数量
			isActiveName: '',
			showSettStatus: false,
			settStatusNew: '',
			rightTitle: '靓号订单',
			beautifulPage: {
				pageNow: 1,
				pageSize: 20
			},
			beautifulTotal: 0,
			beautifulList: [],
			broadbandOrder: []
		};
	},
	onShow() {
		this.orderContentList = [];
		this.orderContentListDirectly = [];
		this.getSystem();
		// this.getUserInfo()
		this.getMyOrder();
		// this.isActive = 0
		if (this.pageObj.pageNow == this.total) {
			return;
		}
	},
	onLoad() {
		// this.timeup('2023-06-12 15:39:00')
	},
	onReachBottom() {
		if (this.pageObj.pageNow < this.total) {
			this.pageObj.pageNow++;
			this.getMyOrder();
		} else if (this.pageObj.pageNow == this.total) {
			uni.showToast({
				title: '暂无更多数据',
				icon: 'none'
			});
			return;
		}
	},
	methods: {
		getSystem() {
			uni.request({
				url: 'https://saler.jkcae.com/app/getSystemSettingInfo',
				method: 'GET',
				success: (res) => {
					if (res.data.code == 1) {
						const pages = getCurrentPages();
						const page = pages[pages.length - 1];
						const title = page.$holder.navigationBarTitleText;
						uni.setStorageSync('systemMessage', res.data.data);
						uni.setNavigationBarTitle({
							title: res.data.data ? res.data.data.h5_title + '-' + title : '订单'
						});
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
						return;
					}
				}
			});
		},

		// 获取用户信息
		getUserInfo() {
			this.$request(
				'/getUserInfo',
				{
					id: uni.getStorageSync('h5-userInfo').id
				},
				'POST'
			).then((res) => {
				if (res.code == 1) {
					this.personMsgObj = res.data;
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					return;
				}
			});
		},

		// 获取我的订单
		// 获取我的订单
		getMyOrder() {
			const that = this;
			let url = this.isActive == 0 ? '/api/getFxuserOrderList' : '/api/getDirectFxuserOrderList';
			this.$request(
				url,
				{
					// user_id: '12466',
					// user_id: uni.getStorageSync('h5-userInfo').id,
					date: this.screenTime,
					package_id: this.packageId,
					mobile: this.screenPhone,
					order_no: this.screenOrder,
					id_card: this.screenIdCard,
					open_status: this.isActiveTwo == 4 ? '' : this.isActiveTwo,
					sett_status: this.settStatusNew,
					order_type: '1',
					page_now: this.pageObj.pageNow,
					page_size: this.pageObj.pageSize
				},
				'GET'
			).then((res) => {
				if (res.code == 1) {
					res.data.forEach((item) => {
						item.showDetails = false;
						this.broadbandOrder.push(item);
					});
					if (this.isActive == 0) {
						that.orderTotalDistribution = res.page_info.total_count;
					} else {
						that.orderTotalDirectly = res.page_info.total_count;
					}

					this.topTabList.forEach((item) => {
						if (item.name == '分销订单') {
							item.orderTotal = res.page_info.total_count;
						}
					});
					this.total = res.page_info.page_count;
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					return;
				}
			});
		},

		// 点击显示更多
		handlerMore(val, index) {
			this.broadbandOrder.forEach((item, index1) => {
				this.$set(item, `isShowMore${index1}`, false);
			});

			this.$set(val, `isShowMore${index}`, true);
		},

		handlerFlag(item, index) {
			return item['isShowMore' + index];
		},

		// 选择订单
		handlerTabs(item, index) {
			this.broadbandOrder = [];
			this.isActive = index;
			this.isActiveName = item.name;
			this.getMyOrder();
			this.isShowOtherSelect = false;
		},

		// 复制号卡订单
		handleCopyOrder(val) {
			let openStatus = '';

			if (val.open_status == 0) {
				openStatus = '待受理';
			} else if (val.open_status == 1) {
				openStatus = '待受理';
			} else if (val.open_status == 2) {
				openStatus = '受理成功';
			} else if (val.open_status == 3) {
				openStatus = '受理失败';
			}

			let settStatus = '';
			if (val.sett_status == 0) {
				settStatus = '未结算';
			} else if (val.sett_status == 1) {
				settStatus = '结算成功';
			} else if (val.sett_status == 2) {
				settStatus = '结算失败';
			}

			let orderObj =
				'订单编号：' +
				val.order_no +
				'\n' +
				'下单时间：' +
				(val.created_at ? val.created_at : '无') +
				'\n' +
				'订单状态：' +
				openStatus +
				'\n' +
				'套餐名称：' +
				val.package_name +
				'\n' +
				// '佣金：' +
				// val.yj +
				// '\n' +
				'结算状态：' +
				settStatus +
				'\n' +
				'结算时间：' +
				(val.sett_time ? val.sett_time : '无') +
				'\n' +
				'结算原因：' +
				(val.sett_reason ? val.sett_reason : '无') +
				'\n' +
				'开卡回文：' +
				(val.open_message ? val.open_message : '无');

			uni.setClipboardData({
				data: orderObj,
				success: function () {
					uni.showToast({
						title: '复制成功',
						icon: 'none',
						duration: 2000
					});
				}
			});
		},

		// 选择开卡状态内容
		selectOrderState(e) {
			this.screenOrderState = e[0].label;
			this.isActiveTwoate = e[0].label;
		},

		// 选择结算状态内容
		selectSettStatus(e) {
			this.settStatus = e[0].label;
			this.settStatusCode = e[0].value;
		},

		// 选择搜索
		handlerFilter() {
			const that = this;
			// 调接口
			if (this.isActive == 0) {
				this.isActiveTwo = '';
				this.orderContentList = [];
				that.getMyOrder();
			} else {
				this.isActiveTwo = '';
				this.orderContentListDirectly = [];
				that.getShareOrder();
			}
		},

		// 点击三角号
		handlerShowOther() {
			this.isShowOtherSelect = !this.isShowOtherSelect;
		},

		// 选择时间
		surePickerTime(e) {
			this.screenTime = e.year + '-' + e.month + '-' + e.day;
		}
	}
};
</script>

<style lang="scss" scoped>
.order_container {
	padding: 16rpx 20rpx;

	.order_top_tab_box {
		display: flex;

		.top_tab_box {
			width: 50%;
			height: 68rpx;
			background: #ededed;
			line-height: 68rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: 500;
			font-family: screen-font;
			color: #333;
			border-radius: 8rpx 8rpx 0 0;
		}

		.top_tab_active_box {
			width: 50%;
			height: 68rpx;
			background: #4f96ff;
			line-height: 68rpx;
			text-align: center;
			font-size: 28rpx;
			font-family: screen-font;
			font-weight: 500;
			color: #fff;
			border-radius: 8rpx 8rpx 0 0;
		}
	}
	.order_middle_tab_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 16rpx;
		background: #fff;
		padding: 34rpx 44rpx 0;

		.order_middle_tab_all {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 26rpx;
			font-family: screen-font;
			font-weight: 400;

			.middle_tab_line {
				width: 32rpx;
				height: 4rpx;
				border-radius: 8rpx;
				background: transparent;
			}
		}

		.order_middle_tab_all_active {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 26rpx;
			font-family: screen-font;
			font-weight: 500;
			color: #4f96ff;

			.middle_tab_line {
				width: 32rpx;
				height: 4rpx;
				border-radius: 8rpx;
				background: #4f96ff;
			}
		}
	}

	.order_screen_box {
		background: #ffffff;

		.order_screen_all {
			display: flex;
			// justify-content: space-between;
			align-items: center;
			border-radius: 4px;
			padding: 18rpx 24rpx 18rpx 28rpx;

			.screen_time_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20rpx 0 0;

				.screen_time {
					font-size: 26rpx;
					font-weight: 400;
					letter-spacing: 0px;
					line-height: 18.56rpx;
				}

				.time_icon {
				}
			}

			.screen_commodity_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20rpx 0 0;

				.screen_commodity {
					font-size: 26rpx;
					font-weight: 400;
					letter-spacing: 0px;
					line-height: 18.56rpx;
				}

				.commodity_icon {
				}
			}

			.screen_btn_box {
				display: flex;
				align-items: center;
				margin-left: 10rpx;

				.screen_btn {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100rpx;
					height: 60rpx;
					line-height: 40rpx;
					font-size: 24rpx;
					font-family: button-font;
					font-weight: 500;
					color: #fff;
					background: #4f96ff;
					border-radius: 8rpx;
				}
			}
		}

		.screen_other_box {
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			padding: 0 24rpx 18rpx 28rpx;

			.other_phone_box {
				width: 268rpx;
				margin: 0 18rpx 18rpx 0;
			}
		}
	}

	.order_list_box {
		border-radius: 4px;
		background: #ffffff;
		padding: 26rpx 22rpx 0 22rpx;
		margin-top: 16rpx;

		.order_title_box {
			display: flex;
			justify-content: space-between;
			font-family: all-font;
			padding-bottom: 20rpx;
		}

		.order_content_box {
			// display: flex;
			// justify-content: space-between;
			font-size: 22rpx;
			font-weight: 400;

			.order_content {
				.order_all {
					display: flex;
					font-family: all-font;
					border-top: 1px solid #f0f0f0;
					border-bottom: 1px solid #f0f0f0;
					padding: 22rpx 0;
				}

				.other_content_box {
					padding: 20rpx 0;
					background: #ededed;

					.other_detail_top {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0 20rpx 16rpx 0;

						.detail_top_all {
							display: flex;
							align-items: center;

							.top_line {
								width: 6rpx;
								height: 26rpx;
								background: #ff5600;
								border-radius: 6rpx;
							}

							.top_title {
								color: #000;
								font-weight: 550;
								padding-left: 10rpx;
							}
						}

						.detail_top_copy {
							display: flex;
							align-items: center;
							height: 40rpx;
							background: linear-gradient(145deg, #b68a2c, #8d5e22);
							border-radius: 10rpx;
							font-weight: 400;
							font-family: screen-font;
							font-size: 24rpx;
							color: #fcfcfc;
							padding: 0 10rpx;
						}
					}

					.other_detail_con {
						display: flex;
						align-items: center;
						color: #000;
						font-size: 24rpx;
						padding: 0 0 10rpx 20rpx;

						.other_order {
							width: 170rpx;
							padding-right: 8rpx;
						}

						.other_con {
						}
					}

					// .other_title {
					// 	display: flex;
					// 	align-items: center;
					// 	justify-content: space-around;
					// 	padding-bottom: 20rpx;
					// }

					// .other_content {
					// 	display: flex;
					// 	align-items: center;
					// }
				}
			}
		}

		.order_content_no {
			text-align: center;
			color: #ccc;
			padding-bottom: 20rpx;
		}
	}

	.commodity_text {
		color: #333;
		text-align: center;
		padding: 20rpx 0;
	}
}
</style>
